<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="css/swiper.css" />
		<title>swiper</title>
		<style>
			.swiper-container{
				width: 810px;
    			height: 320px;
			}
			.swiper-pagination-bullet{
				height: 30px;
				width : 30px;
				text-align: center;
				line-height:30px;
			}
			
		</style>
		
		
		
	</head>
	<body>
		<!--
        	作者：offline
        	时间：2017-03-21
        	描述：第一次修改git
        -->
        <!--
        	git分支修改
        -->
        <!--
        	作者：offline
        	时间：2017-03-21
        	描述：在lee上创建分支并修改
        -->
		<div class="swiper-container">
		  <div class="swiper-wrapper">
		    <div class="swiper-slide"><img src="img/001.jpg" alt="" /></div>
		    <div class="swiper-slide"><img src="img/002.jpg" alt="" /></div>
		    <div class="swiper-slide"><img src="img/003.jpg" alt="" /></div>
		   	<div class="swiper-slide"><img src="img/004.jpg" alt="" /></div>
		   
		  </div>
		  
		   <!-- 如果需要分页器 -->
    		<div class="swiper-pagination"></div>
    		
		   	<div class="swiper-button-prev swiper-button-white"></div>
		    <div class="swiper-button-next swiper-button-black"></div>
		    
		     <!-- 如果需要滚动条 -->
    		<div class="swiper-scrollbar"></div>
		</div>	
		<script src="js/swiper.js"></script>
		<script>
			var mySwiper = new Swiper(".swiper-container",{
				autoplay :2000,
				loop : true,
				//initialSlide : 3,//将第四张提到最前
				//direction : 'vertical',
				speed : 2000,
				
				effect : 'slide',
				//slidesPerView: 2,
				scrollbar:'.swiper-scrollbar',
				scrollbarHide:false,
				zoom : true,
				prevButton:'.swiper-button-prev',
				nextButton:'.swiper-button-next',
				pagination : '.swiper-pagination',
				paginationClickable :true,
				paginationBulletRender: function (swiper, index, className) {
				      	return '<span class="' + className + '">' + (index + 1) + '</span>';
				  	}
								
				})
		</script>
	</body>
</html>
